<template>
  <div>
    <van-search shape="round"
                v-model="value"
                placeholder="请输入搜索关键词" />
    <!-- 搜索下容器 -->
    <div class="search_wrap"
         v-if='true'>
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span class="hot_item"
              v-for="i in 8"
              :key="i">{{ i }}</span>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap"
         v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
        <SongItem v-for="i in 5"
                  :key="i"></SongItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import SongItem from '@/components/SongItem'
export default {
  data () {
    return {
      value: '',
      loading: false,
      finished: false
    };
  },
  components: {
    SongItem
  },
  methods: {
    onLoad () { }
  }
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>